<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { optionApi as MainApi, optionById as MainById } from '@T2/service/api.ts';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import { DeleteMain } from '@T2/utils/handleFnc.ts';

const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;

const { } = defineProps({
  
});
const emits = defineEmits(['closed', 'update']);
const showRf = ref(true);

onMounted(() => {
  GetMain();
});
const MainRt = reactive({
  data: [],
  // total: 0,
});
const GetMain = () => {
  MainApi({
    method: 'get',
    params: {
      type: '信息类型',
    }
  }).then(res => {
    MainRt.data = res?.results || [];
    // MainRt.total = res?.count || 0;
  });
}

/* 新增编辑 */
const Rt = reactive({
  type: '新增',
  index: null,
  form: {},
});
const handleMain = (type, scope = {}) => {
  Rt.type = type;
  if (type === '新增') {
    MainRt.data.unshift({  });
    Rt.form = { name: '' };
    Rt.index = 0;
  } else {
    Rt.form = { id: scope.row.id, name: scope.row.name };
    Rt.index = scope.$index;
  }
}

const handleSubmit = () => {
  if (Rt.type === '新增') {
    AddMain();
  } else if (Rt.type === '编辑') {
    EditMain();
  }
  Rt.index = null;
  Rt.form = {};
}
const CancelMain = () => {
  if (!Rt.form.id) {
    MainRt.data.splice(Rt.index, 1);
  }
  Rt.index = null;
  Rt.form = {};
}
const AddMain = () => {
  MainApi({
    method: 'post',
    data: {
      ...Rt.form,
      type: '信息类型',
      project: curProject.id,
    }
  }).then(res => {
    ElMessage.success('新增成功');
    GetMain();
  }).catch(res => {
    ElMessage.error('新增失败');
    GetMain();
  });
}
const EditMain = () => {
  MainById({
    method: 'patch',
    id: Rt.form.id,
    data: {
      ...Rt.form,
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    GetMain();
  }).catch(res => {
    ElMessage.error('编辑失败');
    GetMain();
  });
}

const handleCancel = () => {
  emits('closed');
}
</script>

<template>
  <div>
    <el-dialog v-model="showRf" title="类型管理" width="400px" @closed="handleCancel()">
      <div class="f-right">
        <el-button link type="primary" style="margin-bottom: 18px;" @click="handleMain('新增')">
          新增类型
        </el-button>
      </div>
      <el-table :data="MainRt.data" :max-height="500" scrollbar-always-on>
        <el-table-column label="类型名称" prop="name" min-width="200px" show-overflow-tooltip>
          <template #default="scope">
            <el-input v-model="Rt.form.name" placeholder="请输入类型名称" v-if="Rt.index === scope.$index" />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="140px">
          <template #default="scope">
            <template v-if="Rt.index === scope.$index">
              <el-button link type="primary" @click="handleSubmit()">
                保存
              </el-button>
              <el-button link type="primary" @click="CancelMain()">
                取消
              </el-button>
            </template>
            <template v-else-if="Rt.index === null">
              <el-button link type="primary" @click="handleMain('编辑', scope)">
                编辑
              </el-button>
              <el-button link type="danger" @click="DeleteMain(true, MainById, scope.row, '', GetMain)">
                删除
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="showRf = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>

<style scoped>
:deep(.el-dialog__body) {
  display: flex;
  flex-direction: column;
}
</style>